<template>
  <div class="xhms">
    <div class="xhms-top">
      <img
        src="https://java.crmeb.net/static/images/seckillTitle.png"
        alt=""
      >
      <span>14:00场</span>
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <div class="more">GO
        <span>></span>
      </div>
    </div>
    <div class="item">
      <div
        class="xhms-item"
        v-for="(item,index) in seckill"
        :key="index"
      >

        <img
          :src="item.image"
          alt=""
        >
        <div>
          <p class="title">{{item.title}}</p>
          <p class="price">${{item.price}}</p>
          <p class="otPrice">{{item.otPrice}}</p>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      time: 24 * 60 * 60 * 1000,
      seckill: []
    }
  },
  methods: {
    async getseckill() {
      const res = await this.$http.getseckill()
      this.seckill = res.data.data.productList
      console.log(this.seckill);
    }
  },
  created() {
    this.getseckill()
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.xhms {
  width: 100%;
  height: 260px;
  .item {
      display: flex;
   
    }
  .xhms-top {
    background-color: wheat;
    display: flex;
    justify-content: space-between;
    img {
      height: 25px;
      border-right: 1px solid #000;
      padding-right: 10px;
    }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #ee0a24;
    }
  }
  .xhms-item {
    margin-left: 20px;

    img {
      height: 110px;
      width: 110px;
    }
    .title {
      width: 93px;
      height: 20px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .price{
      color: red;
      font-weight: bold;
    }
    .otPrice{
      font-size: 18px;
      text-decoration:line-through;
      color: #ccc;
    }
    
  }
}
</style>